<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示与光标</title>
	<style>
		/* 添加背景图 */
		div{
			width: 500px;
			height: 500px;
			background: url(img/1.png);
			background-size: 100%;
			/* 显示属性 
			display作用：将盒子模型中
			块、行、行内块元素切换显示
			显示属性值：none  将盒子模型从页面消失
			           bolck 将盒子模型中元素转换为块元素
					   inline 将盒子模型中元素转换为行元素
			--理论：行转块、块转行，原则针对盒子模型中元素
			属性值：遮罩层、左栏--none隐藏  block显示  
			 */
			dis play: block;
			/* 效果：图图消失了？
			块转行，行内元素特点：元素的宽高由内容定
			div  特点：有宽没高
			*/
		   cursor: help;
		}
		/* p添加背景图片 500*500 */
		p{
			width: 500px;
			height: 500px;
			background: url(img/2.png);
			background-size: 100%;
			/* 显示属性 ：隐藏
			visibility:hidden;和display:none;区别？
			visibility:hidden;特点：盒子模型存在，内容隐藏
			display:none;特点：盒子模型不存在，内容消失
			*/
			visibi lity: hidden;
			/* 光标属性 cursora 属性值  pointer指针
			                           crosshair 十字准线
									   text   文本
									   wait   加载等待
									   help   帮助
			 
			 */
			cursor: pointer;
		}
	</style>
	</head>
	<body>
		<div></div>
		我是图图小淘气，爱吃草莓冰淇淋！
		<p></p>
		小美人鱼啦啦啦啦啦~
	</body>
</html>